<!-- views/Home.vue -->
<template>
	<view class="container">

		<!-- <uni-nav-bar   height="60px" color="#e0e0f9" backgroundColor="#0000cd"  left-icon="left"  title="我的运单"/> -->

		<view class="tab-bar">
			<!-- 选项卡项 -->
			<view class="tab-item" @click="tabClick(0)" :class="{ active: activeIndex === 0 }">
				<text class="tab-text">全部</text>
				<view class="tab-underline" :style="{ width: activeIndex === 0 ? '30px' : '0' }"></view>
			</view>
			<view class="tab-item" @click="tabClick(1)" :class="{ active: activeIndex === 1 }">
				<text class="tab-text">待装车</text>
				<view class="tab-underline" :style="{ width: activeIndex === 1 ? '30px' : '0' }"></view>
			</view>
			<view class="tab-item" @click="tabClick(2)" :class="{ active: activeIndex === 2 }">
				<text class="tab-text">待卸车</text>
				<view class="tab-underline" :style="{ width: activeIndex === 2 ? '30px' : '0' }"></view>
			</view>
			<view class="tab-item" @click="tabClick(3)" :class="{ active: activeIndex === 3 }">
				<text class="tab-text">已卸车</text>
				<view class="tab-underline" :style="{ width: activeIndex === 3 ? '30px' : '0' }"></view>
			</view>
			<view class="tab-item" @click="tabClick(4)" :class="{ active: activeIndex === 4 }">
				<text class="tab-text">已收款</text>
				<view class="tab-underline" :style="{ width: activeIndex === 4 ? '30px' : '0' }"></view>
			</view>
			<view class="tab-item" @click="tabClick(5)" :class="{ active: activeIndex === 5 }">
				<text class="tab-text">已取消</text>
				<view class="tab-underline" :style="{ width: activeIndex === 5 ? '30px' : '0' }"></view>
			</view>
		</view>
		<!-- 订单部分 -->
		<view class="shou3">
			<!-- 全部内容 -->
			<view v-if="activeIndex === 0" class="shou1" v-for="(order, index) in cars" :key="index">
				<view class="zx1">
					<view class="left-section">
						<image src="/static/wen.png" style="width: 40rpx; height: 40rpx; margin-left: -20rpx; "></image>
						<text class="ru" style="margin-left: 20rpx; margin-top: -10rpx;">YD2023062057296</text>
					</view>
					<view class="right-section">
						<text>{{ getStatusText(order.status) }}</text>
					</view>
				</view>
				<view class="bu">
					<view style="margin: 10rpx;">
						<image src="/photo/zhaohuo/diandian.png" mode=""
							style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
					</view>
					<view style="display: flex;flex-direction: column; ">
						<text style="margin: 10rpx;">{{ order.lstation }}</text>
						<text style="margin: 10rpx;">{{ order.ustation }}</text>
					</view>
				</view>
				<view class="jin">
					<uni-section>
						<uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
					</uni-section>
				</view>
				<view class="an">
					<button class="mini-btn" @click="again()">再抢一单</button>
				</view>
			</view>

			<!-- 待装车内容 -->
			<view v-if="activeIndex === 1" class="shou1" v-for="(order, index) in cars.filter(o => o.status === 1)"
				:key="index">
				<view class="zx1">
					<view class="left-section">
						<image src="/static/wen.png" style="width: 40rpx; height: 40rpx; margin-left: -20rpx; "></image>
						<text class="ru" style="margin-left: 20rpx; margin-top: -10rpx;">YD2023062057296</text>
					</view>
					<view class="right-section">
						<text>{{ getStatusText(order.status) }}</text>
					</view>
				</view>
				<view class="bu">
					<view style="margin: 10rpx;">
						<image src="/photo/zhaohuo/diandian.png" mode=""
							style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
					</view>
					<view style="display: flex;flex-direction: column; ">
						<text style="margin: 10rpx;">{{ order.lstation }}</text>
						<text style="margin: 10rpx;">{{ order.ustation }}</text>
					</view>
				</view>
				<view class="jin">
					<uni-section>
						<uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
					</uni-section>
				</view>
				<view class="an">
					<button class="mini-btn">再抢一单</button>
				</view>
			</view>

			<!-- 待卸车内容 -->
			<view v-if="activeIndex === 2" class="shou1" v-for="(order, index) in cars.filter(o => o.status === 3)"
				:key="index">
				<view class="zx1">
					<view class="left-section">
						<image src="/static/wen.png" style="width: 40rpx; height: 40rpx; margin-left: -20rpx; "></image>
						<text class="ru" style="margin-left: 20rpx; margin-top: -10rpx;">YD2023062057296</text>
					</view>
					<view class="right-section">
						<text>{{ getStatusText(order.status) }}</text>
					</view>
				</view>
				<view class="bu">
					<view style="margin: 10rpx;">
						<image src="/photo/zhaohuo/diandian.png" mode=""
							style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
					</view>
					<view style="display: flex;flex-direction: column; ">
						<text style="margin: 10rpx;">{{ order.lstation }}</text>
						<text style="margin: 10rpx;">{{ order.ustation }}</text>
					</view>
				</view>
				<view class="jin">
					<uni-section>
						<uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
					</uni-section>
				</view>
				<view class="an">
					<button class="mini-btn">再抢一单</button>
				</view>
			</view>

			<!-- 已卸车内容 -->
			<view v-if="activeIndex === 3" class="shou1" v-for="(order, index) in cars.filter(o => o.status === 4)"
				:key="index">
				<view class="zx1">
					<view class="left-section">
						<image src="/static/wen.png" style="width: 40rpx; height: 40rpx; margin-left: -20rpx; "></image>
						<text class="ru" style="margin-left: 20rpx; margin-top: -10rpx;">YD2023062057296</text>
					</view>
					<view class="right-section">
						<text>{{ getStatusText(order.status) }}</text>
					</view>
				</view>
				<view class="bu">
					<view style="margin: 10rpx;">
						<image src="/photo/zhaohuo/diandian.png" mode=""
							style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
					</view>
					<view style="display: flex;flex-direction: column; ">
						<text style="margin: 10rpx;">{{ order.lstation }}</text>
						<text style="margin: 10rpx;">{{ order.ustation }}</text>
					</view>
				</view>
				<view class="jin">
					<uni-section>
						<uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
					</uni-section>
				</view>
				<view class="an">
					<button class="mini-btn">再抢一单</button>
				</view>
			</view>

			<!-- 已收款内容 -->
			<view v-if="activeIndex === 4" class="shou1" v-for="(order, index) in cars.filter(o => o.status === 6)"
				:key="index">
				<view class="zx1">
					<view class="left-section">
						<image src="/static/wen.png" style="width: 40rpx; height: 40rpx; margin-left: -20rpx; "></image>
						<text class="ru" style="margin-left: 20rpx; margin-top: -10rpx;">YD2023062057296</text>
					</view>
					<view class="right-section">
						<text>{{ getStatusText(order.status) }}</text>
					</view>
				</view>
				<view class="bu">
					<view style="margin: 10rpx;">
						<image src="/photo/zhaohuo/diandian.png" mode=""
							style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
					</view>
					<view style="display: flex;flex-direction: column; ">
						<text style="margin: 10rpx;">{{ order.lstation }}</text>
						<text style="margin: 10rpx;">{{ order.ustation }}</text>
					</view>
				</view>
				<view class="jin">
					<uni-section>
						<uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
					</uni-section>
				</view>
				<view class="an">
					<button class="mini-btn">再抢一单</button>
				</view>
			</view>

			<!-- 已取消内容 -->
			<view v-if="activeIndex === 5" class="shou1" v-for="(order, index) in cars.filter(o => o.status === 5)"
				:key="index">
				<view class="zx1">
					<view class="left-section">
						<image src="/static/wen.png" style="width: 40rpx; height: 40rpx; margin-left: -20rpx; "></image>
						<text class="ru" style="margin-left: 20rpx; margin-top: -10rpx;">YD2023062057296</text>
					</view>
					<view class="right-section">
						<text>{{ getStatusText(order.status) }}</text>
					</view>
				</view>
				<view class="bu">
					<view style="margin: 10rpx;">
						<image src="/photo/zhaohuo/diandian.png" mode=""
							style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
					</view>
					<view style="display: flex;flex-direction: column; ">
						<text style="margin: 10rpx;">{{ order.lstation }}</text>
						<text style="margin: 10rpx;">{{ order.ustation }}</text>
					</view>
				</view>
				<view class="jin">
					<uni-section>
						<uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
					</uni-section>
				</view>
				<view class="an">
					<button class="mini-btn">再抢一单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		http
	} from '@/config/requst.js';
	import {
		userStore
	} from '@/stores/user';
	// 引入存放jwt的容器
	import {
		tokenStore
	} from '@/stores/token';
	//引入拦截器
	import '@/config/requst.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';


	const token = tokenStore();
	const u = userStore();

	const cars = ref([]);
	const car = async () => {
		try {
			const res = await http({
				url: '/car/yundan/' + u.user.id,
				method: 'get'
			});
			cars.value = res.shuju;
			console.log(cars.value);
		} catch (error) {
			console.error('获取车辆数据失败:', error);
		}
	};

	const activeIndex = ref(0);
	const active = ref(0);
	const list1 = ref([]);
	//订单表的变量
	const or = ref({
		did: '',
		status: ''
	});
	//查询该用户的所有订单
	const cha = async () => {
		const res = await http({
			url: '/orders/selectAll',
			method: "POST",
			data: or.value
		})
		console.log(res.shuju)
	}
	onLoad(() => {
		or.value.did = userStore().user.id
		cha()
		car()
	})

	const tabClick = (index) => {
		activeIndex.value = index;
		active.value = 0;
	};

	const change = () => {
		if (active.value < list1.value.length - 1) {
			active.value += 1;
		} else {
			active.value = 0;
		}
	};

	const again = () => {
		uni.switchTab({
			url: "/pages/Search/Search"
		});
	};

	const getStatusText = (status) => {
		switch (status) {
			case 0:
				return '已结单';
			case 1:
				return '已到矿代装车';
			case 2:
				return '开始装货';
			case 3:
				return '装货完成代卸车';
			case 4:
				return '到达目的地开始卸车';
			case 5:
				return '订单已取消';
			case 6:
				return '订单已完成';
			case 7:
				return '已卸车';
			default:
				return '';
		}
	};
</script>

<style scoped>
	.an {
		margin-left: 470rpx;
		margin-top: 20rpx;
	}

	.mini-btn {
		color: white;
		background-color: #4f77fd;
		width: 200rpx;
		height: 80rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.jin1 {
		margin-top: -30rpx;
	}

	.jin {
		margin-left: 50rpx;
		width: 620rpx;
	}

	.bu1 {
		margin-top: -60rpx;
	}

	.zx1 {
		margin-left: 20rpx;
		height: 100rpx;
		border-bottom: 1px solid #d9d9d9;
	}

	.xiao {
		display: flex;
	}

	.shou3 {
		display: flex;
		flex-direction: column;
		background-color: #f0f0f0;
		/* 设置容器背景颜色以便观察效果 */
		height: 1120rpx;
		margin-top: 88rpx;
		/* 确保内容不被导航栏遮挡 */
	}

	.shou1 {
		background-color: #FFFFFF;
		margin-left: 30rpx;
		margin-top: 20rpx;
		width: 700rpx;
		height: 500rpx;
		border-radius: 15rpx;
		/* 添加圆角效果，可以根据需要调整数值 */
		border-bottom: 1rpx solid #ccc;
		/* 添加下边框 */
	}

	.left-section {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		margin-left: 20rpx;
		color: #8f8f90;
	}

	.right-section {
		display: flex;
		justify-content: flex-end;
		/* 确保“已取消”在右边 */
		width: 660rpx;
		margin-top: -45rpx;
		color: #acacac;
	}

	.bu {
		display: flex;
	}

	.container {
		background-color: #fff;
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #0000CD;
		height: 60px;
		/* margin-top: 88rpx; */
		/* 确保选项卡不被导航栏遮挡 */
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		cursor: pointer;
		/* 添加鼠标悬停效果 */
	}

	.tab-item.active .tab-underline {
		width: 30px;
	}

	.tab-text {
		font-size: 16px;
	}

	.tab-underline {
		height: 3px;
		background-color: #fff;
		transition: width 0.3s;
		width: 0;
		margin-top: 5px;
	}
</style>